<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Browser Assistant</title>
    <link href="./tailwind.css" rel="stylesheet" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body class="bg-gray-50">
    <div id="app" class="flex flex-col" style="width: 400px; height: 600px">
      <!-- 顶部工具栏 -->
      <div id="toolbar" class="toolbar">
        <button
          id="toggleSettings"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"
        >
          设置
        </button>
        <button
          id="automationBtn"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"
        >
          自动化
        </button>
        <button
          id="clearHistory"
          class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"
        >
          清除历史
        </button>
      </div>

      <!-- 聊天界面 -->
      <div class="flex-1 overflow-y-auto">
        <div id="chatContainer" class="p-4">
          <div id="chatHistory" class="space-y-4"></div>
          <div
            id="inputContainer"
            class="sticky bottom-0 bg-white p-4 border-t"
          >
            <div class="flex gap-2">
              <textarea
                id="userInput"
                class="flex-1 p-2 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="输入消息..."
              ></textarea>
              <button
                id="sendBtn"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                发送
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 设置面板 -->
      <div id="settingsPanel" class="hidden absolute inset-0 bg-white p-6">
        <h3 class="text-xl font-bold mb-4">设置</h3>
        <div class="space-y-4">
          <div class="form-group">
            <label for="apiUrl" class="block text-sm font-medium text-gray-700"
              >API URL:</label
            >
            <input
              type="text"
              id="apiUrl"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div class="form-group">
            <label for="apiKey" class="block text-sm font-medium text-gray-700"
              >API Key:</label
            >
            <input
              type="text"
              id="apiKey"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <button
            id="saveSettings"
            class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            保存设置
          </button>
        </div>
      </div>
    </div>

    <script src="./marked.js"></script>
    <script src="./readability.js"></script>
    <script type="module" src="./popup.js"></script>
  </body>
</html>
